<template>
  <page-view class="movieList">
     <movie-item @showImage="previewImage(index)" v-for="(item,index) in hotMovieList" :key="index" :item="item" :index="index"></movie-item>
  </page-view>
</template>
<script>
import { mapActions } from "vuex";
import MovieItem from "../components/MovieItem.vue"
export default {
  name: "Hot",
  data() {
    return {
      hotMovieList: []
    };
  },
  computed: {
    previewImageUrls() {
      let imgWidth = document.documentElement.clientWidth;
      let imgHeight = parseInt((imgWidth * 180) / 128);
      return this.hotMovieList.map(item => {
        return item.img.replace("w.h", `${imgWidth}.${imgHeight}`);
      });
    }
  },
  mounted() {
    this.getHotMovie();
  },
  components: {
    MovieItem
  },
  methods: {
    ...mapActions([
      "showLoading",
      "hideLoading",
      "showPreviewImage",
      "showMenu"
    ]),
    async getHotMovie() {
      this.showLoading();
      let resp = await this.$http.get("/maoyanApi/ajax/movieOnInfoList");
      this.hotMovieList = resp.data.movieList;
      this.hideLoading();
    },
    previewImage(index) {
      this.showPreviewImage({
        urls: this.previewImageUrls,
        current: index
      });
    },
  }
};
</script>
<style lang="scss" scoped>

</style>